<template>
  <div
    :style="{
      padding: '24px',
      background: '#fff',
      postion: 'absolute',
      height: '100%',
    }"
  >
    <a-descriptions title="退款申请">
      <a-descriptions-item
        v-for="(item, index) in datalist"
        :label="item.captions"
        :key="index"
        style="position: absolute; height: 33%"
      >
        {{ item.value }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <a-descriptions title="用户信息">
      <a-descriptions-item
        v-for="(item, index) in userlist"
        :label="item.captions"
        :key="index"
        style="position: absolute; height: 33%;"
      >
        {{ item.value }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <div style="margin-bottom:10px">
            <a-table
      :columns="tablecolumns"
      :data-source="tabledata"
      :pagination="false"
      style="margin-bottom:10px"
    >
      <template slot="title"> 退货商品 </template>
    </a-table>
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="tabledata.length"
      @showSizeChange="onShowSizeChange"
      style="float: right;margin-bottom:10px"
    />
    </div>

  </div>
</template>

<script>
const datalist = [
  {
    captions: "取单号",
    value: "1000000000",
  },
  {
    captions: "状态",
    value: "已取货",
  },
  {
    captions: "销售单号",
    value: "1785785",
  },
  {
    captions: "子订单",
    value: "5454456456",
  },
];

const userlist = [
  {
    captions: "用户姓名",
    value: "付小小",
  },
  {
    captions: "联系电话",
    value: "110",
  },
  {
    captions: "常用快递",
    value: "菜鸟驿站",
  },
  {
    captions: "取货地址",
    value: "哪里哦奥萨蒂卢卡省的拉上考虑",
  },
  {
    captions: "备注",
    value: "无",
  },
];

const tablecolumns = [
  {
    title: "商品编号",
    dataIndex: "ItemNumber",
  },
  {
    title: "商品名称",
    dataIndex: "ItemName",
  },
  {
    title: "商品条码",
    dataIndex: "ItemCode",
  },
  {
    title: "单价",
    dataIndex: "Price",
  },
  {
    title: "数量(件)",
    dataIndex: "Num",
  },
  {
    title: "金额",
    dataIndex: "Money",
  },
];

const tabledata = [
  {
    key: "1",
    ItemNumber: "516544",
    ItemName: "农夫山泉",
    ItemCode: "65451864651321",
    Price: "2.00",
    Num: "2",
    Money: "4.00",
  },
  {
    key: "2",
    ItemNumber: "4535434",
    ItemName: "可口可乐",
    ItemCode: "45635435434535",
    Price: "3.00",
    Num: "1",
    Money: "3.00",
  },
  {
    key: "3",
    ItemNumber: "745354",
    ItemName: "冰红茶",
    ItemCode: "68451564654556",
    Price: "3.00",
    Num: "2",
    Money: "6.00",
  },
  {
    key: "4",
    ItemNumber: "745354",
    ItemName: "冰红茶",
    ItemCode: "68451564654556",
    Price: "3.00",
    Num: "2",
    Money: "6.00",
  },
  {
    key: "5",
    ItemNumber: "4535434",
    ItemName: "可口可乐",
    ItemCode: "45635435434535",
    Price: "3.00",
    Num: "1",
    Money: "3.00",
  },
];

export default {
  name: "datalist",
  components: {},
  data() {
    return {
      datalist,
      userlist,
      tabledata,
      tablecolumns,
    };
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    },
  },
};
</script>
<style>
</style>